<template>
	<view>
		<view class="pad-16r">
			<view class="between border-bottom">
				<view class=" flex-1 align-between">
					<view class="mar-0-5 flex-start baseline">
						<view class="doctor-name">
							<view>{{nurseInfo.nurseName}}</view>
						</view>
						<view class="pad-0-10 flex-start">
							<view class="flex-start  color-gray mar-0-5">
								<view>
									<u-icon v-if="isLikes" name="star-fill" @click="handleLikesIsLike"></u-icon>
									<u-icon v-else name="star" @click="handleLikes"></u-icon>
								</view>
								<view class="mar-0-5">{{nurseInfo.likesNum || 1}}</view>
							</view>
							<view class="flex-start color-gray mar-0-10">
								<view><u-icon name="share"></u-icon></view>
								<view class="mar-0-5">{{nurseInfo.forwardsNum || 1}}</view>
							</view>
						</view>
					</view>
					<view class="flex-start">
						<view v-for="(item,index) in listTabs">
							<view class="tab-item">{{item}}</view>
						</view>
					</view>
					<view class="color-gray  mar-0-5">
						<view>{{nurseInfo.dept + '\t' + nurseInfo.nurseTitle}}</view>
					</view>
				</view>
				<view class="img">
					<image src="/static/images/hospital/defaultNurse.png"></image>
				</view>
			</view>
			<view class=" mar-5">
				<label class="content">
					<label class="shanchang">擅长：</label>
					{{nurseInfo.skill}}
				</label>
				<!-- <label class="shanchang" @click="handleShowAll">{{showAll?'收起':''}}</label> -->
			</view>
		</view>
		<view class="serve-list">
			<!-- 家庭医生 -->
			<view class="card">
				<view class="between align-center">
					<view class="card-title">我的家庭医生</view>
					<u-icon name="checkmark-circle-fill" color="#35A6AF" size="40"></u-icon>
				</view>
			</view>
			<!-- 排班表 -->
			<view class="card">
				<view class="card-subtitle">排班表</view>
				<view class="row flex-start color-gray">
					<u-icon name="map" size="40"></u-icon>
					<view class="mar-0-10 icon-text">{{nurseInfo.hospitalName}}</view>
				</view>
				<view class="row flex-start color-gray">
					<u-icon name="calendar" size="40"></u-icon>
					<view class="mar-0-10 icon-text">{{scheduleRange}}</view>
				</view>
			</view>
			<!-- 服务内容 -->
			<view class="card">
				<view class="between align-center">
					<view class="card-subtitle">服务内容</view>
				</view>
				<view class="between align-center card-row">
					<view class="service-num">{{serviceCount}}项</view>
					<view class="order-link" @click="onReserve">点击预约 ></view>
				</view>
			</view>
			<!-- 评价 -->
			<view class="card">
				<view class="between align-center">
					<view class="card-subtitle">评价</view>
					<view class="color-gray">({{reviewCount}})</view>
				</view>
				<view class="review-item" v-for="(item, index) in reviewList" :key="index">
					<view class="avatar">{{item.avatar}}</view>
					<view class="flex-1">
						<view class="between align-center">
							<view class="flex-start align-center">
								<view class="nickname">{{item.nickname}}</view>
								<view class="vip-icon" v-if="item.isVip">♔</view>
							</view>
							<view class="color-gray">{{item.date}}</view>
						</view>
						<view class="starts mar-5-0">
							<text class="star" v-for="n in 5" :key="n"
								:class="{ 'star-active': n <= item.score }">★</text>
							<text class="score">{{item.score}}.0</text>
						</view>
						<view class="review-content color-gray">
							{{item.content}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapGetters
	} from 'vuex'
	import OnlineConsultationVue from '../../../components/online/OnlineConsultation.vue';
	import DateList from "@/components/DateList/index.vue"
	import doctorScienceInfoVue from '../../Introduce/doctorScienceInfo.vue';
	import {
		schedulingAreaTime,
		doctorScheduling,
		doctorSelect,
	} from "../../../api/doctor.js"
	import {
		doctorLikesSelect,
		doctorLikesAdd
	} from '../../../api/doctorLikes';
	import {
		listSitType
	} from '../../../utils/listSitType'
	var dayjs = require('dayjs')
	export default {
		components: {
			doctorScienceInfoVue,
			DateList,
			OnlineConsultationVue
		},
		data() {
			return {
				doctorItem: {},
				listScheduling: [],
				allPbDate: null,
				showMore: false,
				listBar: [{
						name: '门诊挂号',
					},
					{
						name: '在线问诊',
					},
					{
						name: '医生介绍',
					},
					{
						name: '科普资讯',
					}
				],
				current: 0, //默认选择第几个tab
				currentTabs: 0,
				startDate: "",
				endDate: "",
				listTime: [], //预约时间
				schNo: "", //排班ID
				listTimeArea: [], //排班坐诊类型  上午中午下午等
				listTimeAreaNum: [], //数量
				currentItem: null, //当前选择预约的时间段
				listCurrent: [], //当前时间段的所有数据
				showAll: false,
				doctorCode: '',
				isLikes: false, //没有被关注
				nurseInfo: {},
				scheduleRange: '2025/08/22-2025/8/31(全天)',
				serviceCount: 117,
				reviewCount: 5,
				reviewList: [{
						avatar: 'A',
						nickname: 'A***re',
						isVip: true,
						date: '2025-01-23',
						score: 5,
						content: '很满意，打针前用动画片分散注意力，连哭闹宝宝都能安静配合，您的手比妈妈还温柔'
					},
					{
						avatar: 'B',
						nickname: 'B***re',
						isVip: false,
						date: '2025-01-24',
						score: 4,
						content: '服务态度很好，专业技能过硬，整体体验不错'
					},
					{
						avatar: 'C',
						nickname: 'C***re',
						isVip: true,
						date: '2025-01-25',
						score: 5,
						content: '护士姐姐很温柔，技术很好，一点都不疼'
					},
					{
						avatar: 'D',
						nickname: 'D***re',
						isVip: false,
						date: '2025-01-26',
						score: 5,
						content: '非常专业，态度也很好，值得推荐'
					},
					{
						avatar: 'E',
						nickname: 'E***re',
						isVip: true,
						date: '2025-01-27',
						score: 4,
						content: '服务周到，技术娴熟，整体满意'
					}
				],
				listTabs: ["态度热情", "专业性强", "耐心解答"]
			}
		},
		computed: {
			...mapGetters(['hostApi', "userInfo"])
		},

		mounted() {
			let doctorCurrent = uni.getStorageSync("doctorCurrent")
			this.current = doctorCurrent ? parseInt(doctorCurrent) : 0
			uni.setStorageSync("doctorCurrent", 0)
			this.doctorCode = uni.getStorageSync("doctorCode");
			this.initDoctor();
			this.initDoctorLike();
			this.init()
			document.querySelector('.content').addEventListener('click', this.handleShowAll)
		},
		methods: {
			// 初始化查询医生信息
			initDoctor() {
				// doctorSelect({
				// 	code: this.doctorCode
				// }).then(res => {
				// 	console.log(res)
				// 	if (res.length > 0) {
				// 		this.doctorItem = res[0]
				// 	}
				// })
				this.nurseInfo = {
					nurseName: '韩丽丽',
					dept: '重症医学科',
					nurseTitle: '主管护师',
					hospitalName: '四川省成都市郫都中医院',
					skill: '熟练各种护理操作',
				}
			},
			initDoctorLike() {
				doctorLikesSelect({
					doctorCode: this.doctorCode,
					patId: this.userInfo.patId
				}).then(res => {
					console.log(res)
					if (res.length > 0) {
						this.isLikes = res[0].likesStatus == 1;
					} else {
						this.isLikes = false;
					}
				})
			},
			getDoctorScheduling() {
				let params = {
					queryType: 0,
					deptType: 0,
					sitType: 9, //不穿则查询全天
					supportTimeShare: 1, //是否支持分时
					// deptCode: this.doctorItem.code,
					doctorCode: this.doctorCode,
					endDate: this.endDate,
					beginDate: this.startDate,
				}
				doctorScheduling(params).then(res => {
					console.log(res)
					this.listScheduling = res;
					this.getAllPbDate(this.listScheduling)
					if (res.length > 0) {
						this.schNo = this.listScheduling[0].schNo
						// this.getSchedulingAreaTime();
					}
				})
			},
			init() {
				this.endDate = dayjs().add(14, 'day').format('YYYY-MM-DD')
				this.startDate = dayjs().format('YYYY-MM-DD')
				this.getDoctorScheduling()
			},

			// 得到数组里面的所有日期有号源的信息日期
			getAllPbDate(list) {
				let obj = {};
				for (let i = 0; i < list.length; i++) {
					if (!obj[list[i].schDate]) {
						obj[list[i].schDate] = 1
					} else {
						obj[list[i].schDate] = obj[list[i].schDate] + 1
					}
				}
				this.allPbDate = obj
			},
			getSchedulingAreaTime() {
				schedulingAreaTime({
					schNo: this.schNo,
					doctorCode: this.doctorItem.code, //用于将查询出来的排班信息里面的坐诊地址保存到医生表
				}).then(res => {
					console.log(this.doctorItem)
					this.listTime = res;
					this.setTimeArea();
					// 默认得到时间段的第一个
					this.changeTimeArea(0);
				})
			},
			// 点击问诊挂号，在线问诊，医生介绍和科普资讯按钮
			clickBar(e) {
				this.current = e;
			},
			// 点击上下午按钮
			changeTimeArea(e) {
				this.currentTabs = e;
				this.currentItem = null;
				this.setTimeAreaNum()
			},
			// 选中每个预约时间段
			clickTimeAreaNum(item) {
				if (item.num == 0) {
					return;
				}
				// 将其他所有边框清空，在设置当前的为选中状态
				this.listTimeAreaNum.forEach(res => {
					res.active = false;
				})
				item.active = true;
				this.currentItem = item;
			},
			// 点击日期选中预约
			onDate(val) {
				this.listTimeArea = []
				this.listTimeAreaNum = []
				if (this.listScheduling.length > 0) {
					this.listScheduling.forEach(res => {
						if (res.schDate == val.startDate) {
							this.schNo = res.schNo
							this.getSchedulingAreaTime()
							return res
						}
					})
				}
			},
			// 设置预约上下午时间
			setTimeArea() {
				let map = new Map()
				// 遍历医生号源数量，得到当前坐诊类型的时间是上午，下午，晚上
				this.listTime.forEach(item => {
					let obj = map.get(item.sitType)
					if (obj) {
						map.set(item.sitType, obj + 1)
					} else {
						map.set(item.sitType, 1)
					}
				})
				this.listTimeArea = []
				// 将当前坐诊类型添加到listTimeArea数组中，
				map.forEach((v, k) => {
					listSitType.forEach(item => {
						if (k == item.type) {
							this.listTimeArea.push({
								name: item.name
							})
						}
					})
				})
				// console.log(this.listTimeArea)
			},
			// 设置预约具体时间，查看号源数量
			setTimeAreaNum() {
				let sittype = this.getDetailSitType()
				// 根据坐诊类型得到具体有哪些排班数据
				let list = this.listTime.filter(res => res.sitType == sittype)
				this.listCurrent = list;
				console.log(sittype)
				// 设置每个时间段的余号数量
				let map = new Map();
				list.forEach(item => {
					let obj = map.get(item.beginTime)
					if (obj) {
						map.set(item.beginTime, obj + 1)
					} else {
						map.set(item.beginTime, 1)
					}
				})
				this.listTimeAreaNum = []
				map.forEach((v, k) => {
					for (var i = 0; i < list.length; i++) {
						let start = list[i].beginTime.split(" ")[1];
						let end = list[i].endTime.split(" ")[1];
						let regSortNo = list[i].regSortNo;
						if (k == list[i].beginTime) {
							let obj = {
								...list[i]
							};
							obj.area = start + "-" + end;
							obj.start = start;
							obj.num = v;
							obj.money = this.doctorItem.registerMoney;
							obj.active = false;
							this.listTimeAreaNum.push(obj)
							break;
						}
					}
				})
			},
			// 根据选中的tabs得到具体是什么类型
			getDetailSitType() {
				for (var i = 0; i < this.listTimeArea.length; i++) {
					if (i == this.currentTabs) {
						for (var j = 0; j < listSitType.length; j++) {
							if (listSitType[j].name == this.listTimeArea[i].name) {
								return listSitType[j].type
							}
						}
					}
				}
			},
			toPage() {
				if (this.currentItem) {
					// 这里还需要锁定号源,这个接口没有分配，暂不需要
					// 查询当前是否已经有预约当前医生，并提示
					uni.setStorageSync("currentItem", this.currentItem)
					uni.navigateTo({
						url: '/pages/Introduce/patientRegister?code=' + this.doctorItem.code
					})
					// })

				} else {
					this.$u.toast('请选择预约时间')
				}
			},
			onReserve() {
				// this.$u.toast('功能开发中')
				uni.navigateTo({
					url: '/pages/Home/ServeComposite/NursingNeedKnow?code=' + this.doctorItem.code
				})
			},
			handleShowAll() {
				this.showAll = !this.showAll
			},
			handleLikes() {
				// 点击关注当前医生,同时后端会增加医生被关注数
				doctorLikesAdd({
					doctorId: this.doctorItem.id,
					patId: this.userInfo.patId,
					doctorCode: this.doctorItem.code,
					num: 1
				}).then(res => {
					this.initDoctor()
					this.initDoctorLike()
				})
			},
			handleLikesIsLike() {
				// 点击关注当前医生,同时后端会增加医生被关注数
				doctorLikesAdd({
					doctorId: this.doctorItem.id,
					patId: this.userInfo.patId,
					doctorCode: this.doctorItem.code,
					num: -1
				}).then(res => {
					this.initDoctor()
					this.initDoctorLike()
				})
			}
		}
	}
</script>
<style scoped>
	.border-bottom {
		border-bottom: 1px solid rgb(216, 225, 239);
		padding-bottom: 10px;
	}

	.img {
		width: 70px;
		height: 70px;

		image {
			width: 100%;
			height: 100%;
			border-radius: 8rpx;
		}
	}

	.shanchang {
		color: #35A6AF;
		white-space: nowrap;
		margin: 0 10px 0 0;
		font-size: 12px;
	}

	.doctor-name {
		font-size: 25px;
		font-weight: bold;
		color: #35A6AF;
	}

	.tab-item {
		background-color: rgb(236, 249, 251);
		border-radius: 16rpx;
		padding: 5px 10px;
		margin: 5px 0;
		margin-right: 10px;
	}

	.title {

		padding: 5px;
		margin: 5px 0;
	}

	.title-border {
		padding: 0 5px;
		border-left: 3px solid blue;
	}

	.content {
		font-size: 12px;
		max-height: 60px;
		overflow: hidden;
		transition: max-height 0.5s ease-out;
		position: relative;
		/* line-height: 1.5; */
		text-align: justify;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.content::after {
		font-size: 12px;
		content: "... 全部 > ";
		/* 两个空格实现缩进 */
		position: absolute;
		right: 0;
		bottom: 0;
		color: #35A6AF;
		background: linear-gradient(to right, transparent, white 40%);
		padding-left: 5ch;
		/* 字符单位缩进 */
	}

	.show-all {
		font-size: 12px;
		max-height: none;
		/* 或设置一个足够大的值，如1000px */
	}

	.service-num {
		color: #35A6AF;
	}

	.btn-time {
		border: 1px solid gray;
	}

	.active {
		/* border: none; */
		border: 1px solid blue;
		border-radius: 10rpx;
		padding: 2rpx;
		background-color: aqua;
	}

	.no-num {
		background-color: rgb(193, 209, 235);
		border-radius: 10rpx;
		padding: 2rpx;
	}

	.have-num {
		border: 1px solid gray;
		border-radius: 10rpx;
		padding: 2rpx;
	}

	.btn-register {
		width: 60%;
		border-radius: 45rpx;
		margin: 15rpx;
		background-color: rgb(112, 222, 230);
	}

	.time-area-num {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	/* 新增卡片与评价样式 */
	.card {
		background: #fff;
		border-radius: 8rpx;
		padding: 20rpx;
		margin: 16rpx;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
	}

	.card-row {
		margin: 16rpx 8rpx 0;
	}

	.card-title {
		font-weight: 400;
		color: #000;
		font-size: 30rpx;
	}

	.card-subtitle {
		font-size: 30rpx;
		font-weight: 400;
		color: #000;
	}

	.order-link {
		color: #35A6AF;
	}

	.row {
		margin: 16rpx 0 0 16rpx;
	}

	.icon-text {
		font-size: 28rpx;
	}

	.starts .star {
		color: #ddd;
		margin-right: 6rpx;
	}

	.starts .star-active {
		color: #FFD700;
	}

	.starts .score {
		margin-left: 10rpx;
		color: #999;
	}

	.review-item {
		display: flex;
		margin-top: 12rpx;
	}

	.avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: #f2f2f2;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12rpx;
	}

	.nickname {
		font-weight: 600;
		margin-right: 8rpx;
	}

	.vip-icon {
		color: #f1c40f;
	}

	.review-content {
		margin-top: 8rpx;
		line-height: 1.6;
	}
</style>